/**
 * @description  : 部门选择
 * @descriptionDetail : 部门选择 - 无证户中用
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 15:20:23
 */
<template>
  <view class="page"> 
    <theme-navbar
      :is-white="false"
      :isBack="false"
      backColor="#2b85e4"
      title="选择部门"
    >
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item
              :title="item.name" 
              v-if="item.nodeType != limitNodeType"
              @tap="handlerItem(item)"
            >
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.name" v-else @tap="handlerSelect(item)">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                v-if="selectIds.includes(item.id)"
                slot="right-icon"
              ></u-icon>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script> 
import commonApi from "@/service/common/common.service";
/** 
 * 部门选择
 * 可以限制单选、多选，可选的层级
 */
export default {
  name: "OrgSelect",
  props: {
    // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: true,
    },
    // 限制可选的节点类型：03专卖局、06管理所，07片区
    limitNodeType: {
      type: String,
      default: '07',
    },
    treeType: {
      type: String,
      default:"zm-pq", // zm-case
    },
  },
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER).user,
      orgs: [],   // 所有部门数据
      tabList: [],  // 页头滚动内容
      current: 0,
      orgItems: [],  // 点击选中的下级部门
      selectItems: [],  // 选中的部门
      selectIds: [],    // 选中的id
    };
  }, 
  onLoad() {
		
  },
  created() {
    // 查询所在部门数据
    let org = this.user.org;
    commonApi.orgTree(org.orgUuid, this.treeType).then(dr => {
      if (dr.success) {
        this.orgs = dr.data;
        this.tabList = dr.data.filter(d => d.nodeType == org.orgRank);
        this.orgItems = dr.data.filter(d => d.pId == this.tabList[0].id);
      }
    });
  },
  methods: {
    // 切换选中项
    change(index) {
      this.current = index;
      this.orgItems = this.orgs.filter(d => d.pId == this.tabList[index].id);
      this.tabList = this.tabList.slice(0, index + 1);
    },
    // 点击选中项
    handlerItem(orgItem){
      this.tabList.push(orgItem);
      this.current = this.tabList.length - 1;
      this.orgItems = this.orgs.filter(d => d.pId == orgItem.id);
    },
    // 点击根节点
    handlerSelect(orgItem) {
      if (this.isSingle) {  // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(orgItem);
        this.selectIds.push(orgItem.id);
      } else {  // 多选
        let sItems = this.selectItems.filter(s => s.id == orgItem.id);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter(s => s.id != orgItem.id);
          this.selectIds = this.selectIds.filter(i => i != orgItem.id);
        } else {
          this.selectItems.push(orgItem);
          this.selectIds.push(orgItem.id);
        }
      }
    },
    // 点击确定
    onSure() {
      this.$emit("choose", this.selectItems);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-list {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  z-index: 999;
}
#orgListContainer {
  margin-top: 45px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #FFF;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>